* {
	padding: 0;
	margin: 0;
}

body {
	perspective: 1300px;
}

ul {
	position: relative;
	width: 200px;
	height: 300px;
	margin: 100px auto;
	background: url(./1.jpg) no-repeat left/200px 300px;
	transform-style: preserve-3d;
	animation: rot 8s linear infinite forwards;
}

ul:hover {
	animation-play-state: paused;
}

@keyframes rot {
	from {}

	to {
		transform: rotateY(360deg);
	}
}

li {
	position: absolute;
	left: 0;
	top: 0;
	list-style: none;
	width: 100%;
	height: 100%;
}

li:first-child {
	transform: translateZ(300px);
}

li:nth-child(2) {
	transform: rotateY(60deg) translateZ(300px);
}

li:nth-child(3) {
	transform: rotateY(120deg) translateZ(300px);
}

li:nth-child(4) {
	transform: rotateY(180deg) translateZ(300px);
}

li:nth-child(5) {
	transform: rotateY(240deg) translateZ(300px);
}

li:nth-child(6) {
	transform: rotateY(300deg) translateZ(300px);
}

li img {
	width: 100%;
	height: 100%;
}
